body{
  /*  */
  --y-com--theme: #4285f4;
  --y-com--theme0: #4285f4;
  --y-com--theme1: #ff650b;
  /* --y-com--theme1: #ea4335; */
  /* --y-com--theme1: #ff0202; */
  --y-com--theme2: #ea9d29;
  /* --y-com--theme2: #eabd29; */
  /* --y-com--theme3: #07aeff; */
  --y-com--theme3: #41b883 ;
  /* --y-com--theme4: #7a49ca; */

  --y-com--bgColor0-light: rgb(255, 255, 255);
  --y-com--bgColor1-light: #f3f3f3;
  --y-com--bgColor2-light: #dfdfdf;
  
  --y-com--bgColor0-dark: #222;
  --y-com--bgColor1-dark: #333;
  --y-com--bgColor2-dark: #444;
  --y-com--bgColor3-dark: rgba(0, 0, 0, 0.609);
  /* 主题 */
  -webkit-tap-highlight-color: #fff0;
  /* 盒子 */
  --y-com-hight-control: 4vw;
  --y-com-hight-control1: 3vw;
  --y-com-hight-control2: 2.5vw;
  --y-com-hight-control3: 2vw;
  --y-com-hight-control4: 6vw;

  --y-com-width-percent: 90% ;
  --y-com-width-percent1: 95% ;

  --y-com-width-checkbox:  5vw;
  --y-com-hight-checkbox:  2vw;

  --y-com-padding0: .4vw;
  --y-com-margin0: .5vw;
  --y-com-box-shadow: 0 0 1vw .1vw rgba(0, 0, 0, 0.13);
  /* 盒子 */

  /* 字体 */
  --y-com-fontSize-Big: 1.2vw;
  --y-com-fontSize-Big2: 1.5vw;
  --y-com-fontSize-common: .8vw;

  --y-com-fontColor1: #333;
  --y-com-fontColor2: #fff;
  --y-com-fontColor3: #111;
  --y-com-fontWeight: 500;
  /* 字体 */

  /* 其他 */
  --y-com-radius0: 1vmax; 
  --y-com-radius-fancy0: 30% 70% 68% 32% / 30% 30% 70% 70% ;
  --y-com-radius-fancy1: 66% 34% 61% 39% / 59% 65% 35% 41% ;
  --y-com-radius-fancy2: 62% 38% 46% 54% / 76% 30% 70% 24% ;
  --y-com-radius-fancy3: 24% 76% 46% 54% / 42% 30% 70% 58%  ;
  --y-com-radius-fancy4: 31% 69% 19% 81% / 38% 69% 31% 62%  ;

  --y-com-transition0:all .2s;
  --y-com-animation-time0: 4s;
  --y-com-animation-time1: 2s;
  --y-com-animation-time2: .4s;
  /* 其他 */

  font-weight: var(--y-com-fontWeight);
  transition: var(--y-com-transition0);
}
ul, li {
  margin: 0;
  padding: 0;  
}
*{
  margin: 0;
  padding: 0; 
}
@media screen and (max-width: 1000px) {
  body {
    --y-com-hight-control: 10vw !important;
    --y-com-hight-control1: 8vw !important;
    --y-com-hight-control2: 6vw !important;
    /* --y-com-fontSize-Big: 4vw !important;
    --y-com-fontSize-Big2: 3.5vw !important; */
    /* --y-com-fontSize-common: 3vw !important; */
    --y-com-width-checkbox:  12vw;
    --y-com-hight-checkbox:  6vw;
  }
}

[y-flexX], [y-flexXb], [y-flexXs] {
  display: flex;
  justify-content: center;
  align-items: center;
}
[y-flexXb] {
  justify-content: space-between;
}
[y-flexXs] {
  justify-content: flex-start;
}
[y-flexY] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
[y-side] {
  overflow: auto;
  overflow-x: hidden;
  /*overflow-x: hidden;*/

}
::-webkit-scrollbar
/*滚动条的样式*/
[y-side]::-webkit-scrollbar {
  width: 0;
}
/*[y-side]::-webkit-scrollbar-track {*/
/*  background-color: rgba(255, 255, 255, 0);*/
/*  !* opacity: .5; *!*/
/*}*/
/*[y-side]::-webkit-scrollbar-thumb{*/
/*  background-color: rgba(132, 132, 132, 0.258);*/
/*  !* border: 1px solid rgba(255, 255, 255, 0.466); *!*/
/*  border-radius: 2vw;*/
/*  opacity: .5;*/
/*}*/
[y-side2]::-webkit-scrollbar {
  background-color: rgba(255, 255, 255, 0);
  opacity: 0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  width: 0 !important
}
[y-side2]{
  scrollbar-width:none;
  -ms-overflow-style:none;
  overflow: -moz-scrollbars-none;
}
[y-com-delet]{
  border-radius: 10vw;
  /* border: 2px solid var(--y-com--theme); */
  background-color: rgba(128, 128, 128, 0.543);
  position: relative;
  transition: var(--y-com-transition0);
  cursor: pointer;
}
[y-com-delet]:hover{
  background-color: #fff;
  opacity: .7;
}
[y-com-delet]:hover::after{
  background-color: gray;
}
[y-com-delet]:hover::before{
  background-color: gray;
}
[y-com-delet]::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 70%;
  height: 1px;
  background-color: white;
  transition: var(--y-com-transition0);
}
[y-com-iconwrap]{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  margin:0 3%;
  padding: 2%;
  --y-com-iconwrap-color: rgba(166, 166, 166, 0.263);
  background-color: var(--y-com-iconwrap-color);
  border: 10% var(--y-com-iconwrap-color) solid ;
  color: var(--y-com--theme);
  font-size: 110% !important;
}
[y-com-iconwrap] img{
  width: 100%;
  min-height: 100%;
  background-color: rgba(255, 255, 255, 0.804);
  border-radius: inherit;
}
[y-com-delet]::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 70%;
  height: 1px;
  background-color: white;
  transition: var(--y-com-transition0);
}
button[y-com-button]{
  background-color: var(--y-com--theme);
  border-radius: var(--y-com-radius0);
  height: var(--y-com-hight-control1);
  font-size: var(--y-com-fontSize-Big);
  border: none;
  margin: var(--y-com-margin0) 0;
  color: white;
  font-weight: var(--y-com-fontWeight);
  width: var(--y-com-width-percent);
  cursor: pointer;
  transition: var(--y-com-transition0);
  animation: ycominit var(--y-com-animation-time2);
}
button[y-com-button]:active{
  opacity: .4 !important;
}
button[y-com-button]:hover{
  opacity: .8;
  border-radius: calc(var(--y-com-radius0)/2) ;
}
input[type='checkbox'][y-com-checkbox] {
  -webkit-appearance: none;
  background-color: rgba(185, 185, 185, 0.537);
  width: var(--y-com-width-checkbox);
  border-radius: 10vw;
  height: var(--y-com-hight-checkbox);
  transition: var(--y-com-transition0);
  position: relative;
  cursor: pointer;
  animation: ycominit var(--y-com-animation-time2);
}
input[type='checkbox'][y-com-checkbox]::after {
  content: '';
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 21%;
  width: calc(var(--y-com-hight-control3) * 0.8);
  height: calc(var(--y-com-hight-control3) * 0.8);
  border-radius: 50%;
  /* background-color: var(--y-com-themeborderColor2); */
  background-color: var(--y-com-themeborderColor2);
  opacity: .8;
  font-size: var(--y-com-fontSize-common);
  transition: var(--y-com-transition0);
}
input[type='checkbox'][y-com-checkbox]:checked{
  background-color: var(--y-com--theme);
}
input[type='checkbox'][y-com-checkbox]:checked::after{
  left: 80%;
}
[ycomdownBox] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
}
[y-com-load] {
  margin:0  auto;
  width: 20%;
  padding-top: 10%;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: var(--y-com-fontSize-Big);
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: rgb(221, 27, 27); */

  transform: translate(-50%, -50%);
}
[y-com-load]::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -7%;
  width: 50%;
  padding-top: 50%;
  border-radius: 50%;
  background-color: var(--y-com--theme);
  opacity: .8;
  animation: y-com-load-move 1.8s infinite ;
}
[y-com-load]::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 57%;
  width: 50%;
  padding-top: 50%;
  border-radius: 50%;
  background-color: var(--y-com--theme);
  opacity: .7;
  animation: y-com-load-move2 1.8s  infinite ;
}
@keyframes y-com-load-move {
  0%, 100% {
    left: -7%;
  }
  25% {
    left: 22.5%;
    transform: scale(1.2);
  }
  50% {
    left: 57%;
  }
  75%{
    transform: scale(.8);
    left: 22.5%;
  }
}
@keyframes y-com-load-move2 {
  0%, 100% {
    left: 57%;
  }
  25% {
    left: 22.5%;
    transform: scale(.8);
  }
  50% {
    left: -7%;
  }
  75%{
    transform: scale(1.2);
    left: 22.5%;
  }
}
[y-com-reload] {
  margin:0  auto;
  width: 20%;
  padding-top: 10%;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: var(--y-com-fontSize-Big);
  --y-com-reload-fontsize: var(--y-com-fontSize-Big);
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
[y-com-reload-text]{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 80%;
  height: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1vw;
  white-space: nowrap;
  opacity: .9;
  /* background-color: var(--y-com-themeborderColor2); */
  transition: var(--y-com-transition0);
  cursor: pointer;
}
[y-com-reload-text]:hover{
  opacity: .7;
  transform: translate(-50%, -50%) scale(1.2);
}
[y-com-reload]::after {
  content: '';
  position: absolute;
  top: 0%;
  left: -7%;
  width: 50%;
  padding-top: 50%;
  border-radius: 50%;
  background-color: var(--y-com--theme);
  opacity: .8;
  animation: y-com-load-move 1.8s infinite ;
}
[y-com-reload]::before {
  content: '';
  position: absolute;
  top: 0%;
  left: 57%;
  width: 50%;
  padding-top: 50%;
  border-radius: 50%;
  background-color: var(--y-com--theme0);
  opacity: .7;
  animation: y-com-load-move2 1.8s  infinite ;
}
.y-com-input input[y-com-input]{
  -webkit-appearance: none;
  width: calc(100% - 35%);
  /* flex: 1; */
  height: 100%;
  outline: none;
  box-sizing: border-box;
  border: none;
  background-color: rgba(167, 167, 167, 0) ;
  color: inherit;
  padding: 0 10%;
  box-sizing: border-box;
  text-align: center;
}
[y-com-logo]{
  width: 100%;
  height: 100%;
  /* border-radius: var(--y-com-radius-fancy0); */
  border-radius: 40vw;
  position: relative;
  /* animation: y-com-logo-move0 infinite  var(--y-com-animation-time0); */
  background-color: var(--y-com--theme);
  transition: var(--y-com-transition0);
}
/* [y-com-logo]::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 110%;
  height: 110%;
  background-color: inherit;
  animation: y-com-logo-move1 infinite  var(--y-com-animation-time0);
  opacity: .45;
}
[y-com-logo]::before {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 120%;
  height: 120%;
  background-color: inherit;
  animation: y-com-logo-move3 infinite  var(--y-com-animation-time0);
  opacity: .25;
} */
@keyframes y-com-logo-move0 {
  100%,0%{
    border-radius: var(--y-com-radius-fancy0);
  }
  30% {
    border-radius: var(--y-com-radius-fancy1) ;
  }
  70%{
    border-radius: var(--y-com-radius-fancy2) ;
  }
}
@keyframes y-com-logo-move1 {
  100%,0%{
    border-radius: var(--y-com-radius-fancy1);
  }
  30% {
    border-radius: var(--y-com-radius-fancy2) ;
  }
  70%{
    border-radius: var(--y-com-radius-fancy3) ;
  }
}
@keyframes y-com-logo-move3 {
  100%,0%{
    border-radius: var(--y-com-radius-fancy4);
  }
  30% {
    border-radius: var(--y-com-radius-fancy3) ;
  }
  70%{
    border-radius: var(--y-com-radius-fancy1) ;
  }
}

.y-com-dark {
  background-color: #000;
  color: var(--y-com-fontColor2);
  --y-com--theme: var(--y-com--theme0);
  --y-com-themeborderColor: var(--y-com-fontColor2);
  --y-com-themeborderColor2: var(--y-com-fontColor3);
  --y-com-themetextColor: var(--y-com-fontColor2);
}
.y-com-dark [theme], .y-com-dark [theme1], .y-com-dark [theme2], .y-com-dark [theme3], .y-com-dark .y-theme1, .y-com-dark [theme4], .y-com-dark [theme41]{
  background-color: var(--y-com--bgColor0-dark);
  transition: var(--y-com-transition0);
  font-size: var(--y-com-fontSize-common);
  color: var(--y-com-fontColor2);
}

.y-com-dark [theme1]{
  background-color: var(--y-com--bgColor1-dark);
}
.y-com-dark .y-theme1{
  background-color: var(--y-com--bgColor1-dark) !important;
}
.y-com-dark [theme2]{
  background-color: var(--y-com--bgColor2-dark);
}
.y-com-dark [theme3]{
  /* background-color: var(--y-com--bgColor3-dark); */
  background-color: rgba(0, 0, 0, 0);
}
.y-com-dark [theme3]:hover{
  background-color: var(--y-com--bgColor3-dark);
  background-color: rgba(255, 255, 255, 0.13);
  /* background-color: var(--y-com--theme); */
  /* color: #222; */
}
.y-com-dark [theme4]{
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(1vw);
  /* background-color: var(--y-com--theme); */
  /* color: #222; */
}
.y-com-dark [theme41]{
  background-color: rgba(52, 52, 52, 0.4);
  backdrop-filter: blur(1vw);
  /* background-color: var(--y-com--theme); */
  /* color: #222; */
}

.y-com-light {
  background-color: var(--y-com--bgColor1-light);
  /* background-color: #f8f8f8; */
  color: var(--y-com-fontColor1);
  --y-com--theme: var(--y-com--theme0);
  --y-com-themeborderColor: var(--y-com-fontColor1);
  --y-com-themeborderColor2: var(--y-com-fontColor2);
  --y-com-themetextColor: var(--y-com-fontColor1);

}
.y-com-light [theme], .y-com-light [theme1], .y-com-light [theme2], .y-com-light [theme3], .y-theme1, .y-com-light [theme4],  .y-com-light [theme41] {
  background-color: var(--y-com--bgColor0-light);
  transition: var(--y-com-transition0);
  font-size: var(--y-com-fontSize-common);
  color: var(--y-com-fontColor1);
}
/*@media screen and (max-width: 767px) {*/
/*  .y-com-light [theme], .y-com-light [theme1], .y-com-light [theme2], .y-com-light [theme3], .y-theme1, .y-com-light [theme4],  .y-com-light [theme41] {*/
/*    background-color: #dedede;*/
/*  }*/
/*}*/
.y-com-light [theme1]{
  background-color: var(--y-com--bgColor1-light);
}
.y-com-light .y-theme1{
  background-color: var(--y-com--bgColor1-light) !important;
}
.y-com-light [theme2]{
  background-color: var(--y-com--bgColor2-light);
}
.y-com-light [theme3]{
  /*background-color: var(--y-com--bgColor3-light);*/
  background-color: rgba(255, 255, 255, 0);
}
/*.y-com-light [theme3]:hover{*/
/*  !*background-color: var(--y-com--bgColor3-light);*!*/
/*  background-color: rgba(0, 0, 0, 0.132);*/
/*}*/
.y-com-light [theme4]{
  background-color: rgba(255, 255, 255, 0.792);
  backdrop-filter: blur(1vw);
}
.y-com-light [theme41]{
  background-color: rgba(237, 237, 237, 0.681);
  backdrop-filter: blur(1vw);
}

.y-com-light1, .y-com-dark1 {
  --y-com--theme: var(--y-com--theme1);
}
.y-com-light2, .y-com-dark2 {
  --y-com--theme: var(--y-com--theme2);
}
.y-com-light3, .y-com-dark3 {
  --y-com--theme: var(--y-com--theme3);
}

.y-com-into-enter-active,.y-com-into-leave-active {
  transition: all .3s ;
}
.y-com-into-enter-from,
.y-com-into-leave-to {
  opacity: 0 !important;
}
.y-com-into-enter-from{
  height: 0 !important;
}
@keyframes ycominit {
  0%{
    opacity: 0 ;
    overflow: hidden;
  }
}
@keyframes ycominit2 {
  0%{
    height: 0  ;
    opacity: 0  ;
    overflow: hidden;
  }
}
@keyframes ycominit3 {
  0%{
    height: 0  ;
    width: 0;
    opacity: 0  ;
    overflow: hidden;
  }
}
@keyframes ycomdown {
  0%{
    top: 100%;
    left: 0;
  }
}
@keyframes ycominit4 {
  0%{
    height: 0  ;
    width: 0;
    transform: scale(0);
    opacity: 0  ;
    overflow: hidden;
  }
}
@keyframes ycomdown {
  0%{
    top: 100%;
    left: 0;
  }
}
.y-com-into-leave-active {
  animation: ycominit2 .2s reverse;
}
.y-com-into-enter-active {
  animation: ycominit2 .2s;
}
.y-com-into2-leave-active {
  animation: ycominit .2s reverse;
}
.y-com-into2-enter-active {
  animation: ycominit .2s;
}
.y-com-into3-leave-active {
  animation: ycominit3 .1s reverse;
}
.y-com-into3-enter-active {
  animation: ycominit3 .1s;
}
.y-com-into4-leave-active {
  animation: ycominit4 .2s reverse ;
}
.y-com-into4-enter-active {
  animation: ycominit4 .2s ;
}
.y-com-down-leave-active{
  animation: ycomdown .2s reverse;
}
.y-com-down-enter-active{
  animation: ycomdown .2s ;
}